<template>
    <!-- <p class="page-title">显示 Baike 内容，ID: {{ id }}</p> -->
    <el-row :gutter="20" class="pet-page-wrapper" v-if="animal && animal.imgPath">
        <el-col :span="24" class="pet-avatar-info">
            <el-row class="pet-page">
                <el-col :span="6" class="pet-avatar">
                    <img :src="animal.imgPath" alt="Pet Avatar" class="avatar-img" />
                </el-col>
                <el-col :span="18" class="pet-info">
                    <div class="pet-name">{{ animal.全名 }}</div>
                    <div class="pet-details">
                        <el-row>
                            <el-col :span="6"><strong>价格:</strong>{{ animal.价格 }} </el-col>
                            <el-col :span="6"><strong>体型:</strong>{{ animal.体型 }} </el-col>
                            <el-col :span="6"><strong>分类:</strong>{{ animal.分类 }} </el-col>
                            <el-col :span="6"><strong>别名:</strong>{{ animal.别名 }} </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6"><strong>功能:</strong>{{ animal.功能 }} </el-col>
                            <el-col :span="6"><strong>原产地:</strong> {{ animal.原产地 }}</el-col>
                            <el-col :span="6"><strong>寿命:</strong>{{ animal.寿命 }} </el-col>
                            <el-col :span="6"><strong>智商:</strong>{{ animal.智商 }} </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6"><strong>毛发:</strong>{{ animal.毛发 }} </el-col>
                            <el-col :span="6"><strong>饲养:</strong>{{ animal.饲养 }} </el-col>
                        </el-row>
                    </div>
                    <div class="pet-description">
                        <strong>简介:</strong>
                        <p>{{ animal.简介 }}</p>
                    </div>
                </el-col>
            </el-row>
        </el-col>
        <!-- 相关文章 -->
        <div class="article-list">
            <h3>相关文章</h3>
            <el-row v-if="articles.length > 0">
                <el-col :span="24" v-for="article in articles" :key="article.id" class="article-item">
                    <router-link :to="`/article/${article.id}`">
                        <div class="article-title">{{ article.title }}</div>
                        <div class="article-meta">
                            <span class="article-column">{{ article.column }}</span>
                            <span class="article-date">{{ article.view_date }}</span>
                        </div>
                    </router-link>
                </el-col>
            </el-row>
            <p v-else>暂无相关文章</p>
        </div>
    </el-row>
    <p v-else>Loading...</p> <!-- 显示加载中的信息 -->
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { getAnimalBaike, searchArticles } from "@/api/baike";
import { getimage } from "@/api/image";

// 获取当前路由参数中的id
const route = useRoute();
defineProps({
    id: String
});
const id = route.params.id;

const articles = ref([]);

const animal = ref(null);  // 设置初始值为 null

const getArticles = async () => {
    try {
        const response = await searchArticles(animal.value.全名);
        if (response.data.data.length === 0) {
            // 如果返回的数据为空列表，尝试使用分类作为参数
            const backupResponse = await searchArticles(animal.value.分类);
            articles.value = backupResponse.data.data;
        } else {
            articles.value = response.data.data;
        }
    } catch (error) {
        // 移除了 console.error("Failed to fetch articles:", error);
    }
};

const getAnimal = async (id: string) => {
    try {
        const response = await getAnimalBaike(id);
        animal.value = response.data.data;
        if (animal.value && animal.value.imgPath) {
            animal.value.imgPath = getimage(animal.value.imgPath);
        }
        getArticles();
    } catch (error) {
        // 移除了 console.error("Failed to fetch animal data:", error);
    }
};

onMounted(() => {
    getAnimal(id as string);
    // getArticles();
});
</script>

<style scoped>
.page-title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

.pet-page-wrapper {
    padding: 20px;
    background-color: #f9f9f9;
}

.pet-avatar-info {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.pet-avatar {
    display: flex;
    justify-content: center;
    align-items: center;
}

.article-item a {
    text-decoration: none;
}

.avatar-img {
    width: 180px;
    height: 180px;
    border-radius: 10%;
    border: 2px solid #ddd;
    object-fit: cover;
}

.pet-info {
    padding-left: 20px;
}

.pet-name {
    font-size: 28px;
    font-weight: bold;
    color: #444;
    margin-bottom: 15px;
}

.pet-details {
    font-size: 14px;
    color: #555;
}

.pet-description {
    margin-top: 20px;
    color: #666;
}

.pet-details .el-row {
    margin-bottom: 10px;
}

.pet-details .el-col {
    padding-right: 10px;
}

.additional-info {
    background-color: #f0f0f0;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 相关文章区域样式 */
.article-list {
    margin-top: 20px;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.article-list h3 {
    font-size: 20px;
    font-weight: bold;
    color: #444;
    margin-bottom: 15px;
}

.article-item {
    margin-bottom: 15px;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 6px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.article-item:hover {
    background-color: #f0f0f0;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.article-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.article-meta {
    font-size: 12px;
    color: #666;
}

.article-column {
    margin-right: 10px;
    color: #888;
}

.article-date {
    color: #999;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .article-list {
        padding: 15px;
    }

    .article-item {
        padding: 10px;
    }

    .article-title {
        font-size: 14px;
    }

    .article-meta {
        font-size: 11px;
    }
}
@media (max-width: 768px) {
    .pet-page-wrapper {
        padding: 10px;
    }

    .pet-avatar-info {
        padding: 10px;
    }

    .pet-avatar {
        justify-content: flex-start;
    }

    .pet-name {
        font-size: 22px;
    }

    .pet-details,
    .pet-description {
        font-size: 12px;
    }

    .avatar-img {
        width: 150px;
        height: 150px;
    }
}
</style>